<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单生成器</title>
    <style>
        .all{
            width: 440px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
        }
        .head{
            padding: 5px 20px;
            background-color: blue;
            color: cornsilk;
            font-size: 14px;
        }
        .two{
            padding:10px 20px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h2>表单生成器</h2>
  <div class="all">
    <div class="head">个人信息</div>
      <div class="two">
      <form method='post'>
        姓名：<input type="text" name="user"><br/><br/>
        性别：<input type="radio" name="gender" value="m"> 男
              <input type="radio" name="gender" value="w"> 女<br/><br/>
        爱好：<input type="checkbox" name="hobby[]" value="swimming">游泳
              <input type="checkbox" name="hobby[]" value="reading">读书
              <input type="checkbox" name="hobby[]" value="running">跑步<br/><br/>
        住址：<select name="area">
              <option>--请选择--</option>
              <option value="bj">北京</option>
              <option value="sh">上海</option>
              <option value="sz">深圳</option>
            </select><br/><br/>
        自我介绍:<textarea name="introduce" cols="40" rows="3"></textarea><br/><br/>
        <input type="submit" value="提交">
      </form>
     </div>
     <p><a href="default.html">返回目录</a></p>
     <p><a href="diwu.html">返回第五章</a></p>
  </div>
     <form id="form"></form>
     <script src="./FormBuilder.js"></script>
     <script>
         var html=new FormBuilder(elements).create();
         document.getElementById('form').innerHTML=html;
     </script>
     <p><a href="default.html">返回目录</a></p>
     <p><a href="第五章.html">返回第五章</a></p>
     <p><a href="第六章.html">下一章</a></p> 
</body>
</html>